<!--回弹业务数据字典---回弹仪器设备管理---查看-->
<template>
  <div class="department" id="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox>
        </div>
      </div>
      <tree :treeData="treeData" :checkData="checkData" name="currencyList" nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <div class="department_right_name">
        <div>{{ showName }}</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left left_select">
          <el-select v-model="departmentList.text" placeholder="请选择设备类型" @change="filterDepartment($event)">
            <el-option v-for="(a, item) in departmentList" :key="item" :value="a.text" :label="a.text">
            </el-option>
          </el-select>
          <input type="text" placeholder="请输入设备名称" v-model="getList.keyWord" />
          <el-button type="primary" icon="el-icon-search" size="small" @click="yj_searchForm(getList)">查询
          </el-button>
        </div>
        <!-- 顶部按钮 -->
        <div class="print">
          <div class="printTable">
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="yj_searchForm(getList)"></el-button>

            <el-button type="primary" v-if="yj_view" icon="el-icon-search" size="small"
              @click="editText(fId)">查看</el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <tableData :height="navigatepageNums > 1 ? 'calc(100% - 50px)' : '100%'" :config="table_config"
          :dataList="tableData" :loading="loading" @selection-change="selectionChange" @sort-change="sortChange"
          @click-change="rowChange" @openDialog="yj_viewForm" :page="getList.page" :pageSize="getList.pageSize" />
        <pagination v-if="navigatepageNums > 1" :treelength="treelength" :total="queryCriteriaData.total"
          :pageNum.sync="getList.page" :limit.sync="getList.pageSize" :info="queryCriteriaData"
          @pagination="yj_searchForm(getList)" />
      </div>

      <!--弹框 查看 -->
      <div class="Control-1 mechanism_dialogS">
        <el-dialog title="查看仪器设备信息" v-dialogDrag :visible.sync="dialogTableVisible" v-loading="loadingDialog"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: '550px' }">
            <el-form :model="formData" ref="formData">
              <div class="tableRow">
                <el-form-item label="建设项目简称" prop="fProjectname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fProjectname" autocomplete="off" placeholder="请输入" disabled></el-input>
                </el-form-item>
                <el-form-item label="施工标段简称" prop="fCompanyname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fCompanyname" autocomplete="off" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="外检设备类型" prop="fUseplace" :label-width="formLabelWidth">
                  <el-input v-model="formData.fUseplace" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="fEqptname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fEqptname" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="设备编号" prop="fEqptno" :label-width="formLabelWidth">
                  <el-input v-model="formData.fEqptno" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="规格型号" prop="fEqptspecs" :label-width="formLabelWidth">
                  <el-input v-model="formData.fEqptspecs" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="制造厂家" prop="fFactoryname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fFactoryname" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="生产编号" prop="fCertificationno" :label-width="formLabelWidth">
                  <el-input v-model="formData.fCertificationno" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="生产日期" prop="fOutdates" :label-width="formLabelWidth">
                  <el-input v-model="formData.fOutdates" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="保管人" prop="fOperusername" :label-width="formLabelWidth">
                  <el-input v-model="formData.fOperusername" autocomplete="off" disabled></el-input>
                </el-form-item>
              </div>

              <div class="tableRow" style="margin-top: 10px">
                <el-form-item label="资料附件" prop="fSourcefile" :label-width="formLabelWidth">
                  <div style="
                        height: 96px;
                        width: 100%;
                        border-radius: 4px;
                        border: 1px solid #dcdfe6;
                        box-sizing: border-box;
                        background-color: #f5f7fa;
                      ">
                    <div ref="fPhotofilelist" style="
                          height: 25px;
                          line-height: 25px;
                          width: 100%;
                          display: flex;
                          border-radius: 5px;
                          margin: 8px 0 2px 0;
                        ">
                      <div v-for="(v, i) in fPhotofilelist" :key="i" v-viewer style="
                            margin: 2px 3px;
                            height: 87%;
                            width: 18px;
                            height: 22px;
                          ">
                        <img style="width: 100%; height: 100%" :src="v.url" />
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="备注" prop="fNote" :label-width="formLabelWidth">
                  <el-input v-model="formData.fNote" type="textarea" :rows="4" placeholder="请输入内容" autocomplete="off"
                    disabled></el-input>
                </el-form-item>
              </div>

              <!-- <el-form-item class="newlyAdded_btn">
                <el-button type="warning" @click="resetForm()">关闭</el-button>
                                                              </el-form-item> -->
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!-- 查看图片 -->
      <div class="uploadWidth">
        <el-dialog :title="fFileName" :visible.sync="dialogPdf" v-dialogDrag>
          <div :style="{ height: dialogHeights }">
            <!-- <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe> -->
            <embed :src="`${pdfUrl}#toolbar=0`" hidden="false" type="application/pdf" height="100%" width="100%" />
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserCompanyTreeList,
  // getBaseCompanyList,
  getMangEquipmentPageList,
  getMangEquipmentByFid,
} from "@/api/request.js";
import tree from "@/components/public/common-trees";
import TableData from "@/components/public/el-tables"; //主页面列表
import Pagination from "@/components/public/el-pagination"; //主页面分页

export default {
  inject: ["reload"],
  name: "Home",
  data() {
    return {
      name: "instrument",
      // 分页
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      // 上传图
      fPhotofilelist: [],
      dialogPdf: false,
      pdfUrl: "",
      fFileName: "", // 上传附件
      dialogHeights: "",
      // 上传图

      yj_view: null,
      departmentList: [
        { text: "==请选择==" },
        { text: "混凝土回弹检测仪器设备" },
        { text: "钢筋保护层厚度检测设备" },
      ], //外检设备类型
      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级
      showName: "未选择公司",
      dialogHeight: "",
      fId: null, //当前数据fId
      loading: false,
      fDepartmentid: "", //当前行部门id
      dialogFormVisible: false,
      // 列表
      getList: {
        modelType: "2", // 0代办 1已办  2查询页面
        fCompanyid: null, //机构id
        fUserid: null, //当前登录用户id
        sublevel: "1", //查看下级  1是0否
        keyWord: null, //设备名称模糊查询字段
        keyType: null, //设备类型
        page: 1, //页码
        pageSize: 20, //每页条数
      },
      table_config: {
        // 列表配置项
        imgKeyWord: "url",
        fileKeyWord: "url",
        fileName: "fFileName",
        dialogHeight: "",
        thead: [
          {
            label: "建设项目简称",
            prop: "fProjectname",
            minWidth: "200px",
            align: "left",
          },
          {
            label: "施工标段简称",
            prop: "fCompanyname",
            minWidth: "200px",
            align: "left",
          },
          {
            label: "设备编码",
            prop: "fEqptno",
            minWidth: "120px",
            align: "left",
          },
          {
            label: "设备名称",
            prop: "fEqptname",
            minWidth: "120px",
            align: "left",
          },
          {
            label: "规格型号",
            prop: "fEqptspecs",
            minWidth: "120px",
            align: "left",
          },

          {
            label: "制造厂家",
            prop: "fFactoryname",
            minWidth: "200px",
            align: "center",
          },
          {
            label: "生产编号",
            prop: "fCertificationno",
            minWidth: "100px",
            align: "center",
          },
          {
            label: "生产日期",
            prop: "fOutdates",
            minWidth: "100px",
            align: "center",
          },
          {
            label: "备注",
            prop: "fNote",
            minWidth: "100px",
            align: "center",
          },
        ],
        isCheckBox: false,
        isIndex: true,
        isOperation: true,
        // 表格操作列
        operation: {
          label: "操作",
          width: "100",
          detail: true,
          cols: [],
        },
      },

      // 查看
      loadingDialog: false,
      dialogTableVisible: false,
      formData: {},
      row: null,
      companyTree: "", //所有数据
      formLabelWidth: "82px",
      treeData: [], //左侧树
      tableData: [], //表格数据列表

      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      companyId: null,
      userInfo: {}, //登录用户
      checkData: [],
      treeText: {
        companyId: null,
        userId: null,
      },
    };
  },
  components: {
    tree,
    TableData, //主页面列表
    Pagination, //分页
  },
  mounted() {
    this.table_config.operation.cols = [
      {
        label: "查看",
        type: "primary",
        handleRow: this.handleRow,
      },
    ];

    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (JSON.parse(sessionStorage.getItem("currencyList"))) {
      var id = JSON.parse(sessionStorage.getItem("currencyList"));
      this.checkData = [id.fCompanyid];
    }
    this.getHeight();
    this.getTree();
    this.btnRole(this.name);
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        this.yj_view = btnStr.includes("yj_view");
      } else {
        this.yj_view = true;
      }
    },
    // 左侧树结构
    getTree() {
      this.treeText.companyId = this.userInfo.companyId;
      this.treeText.userId = this.userInfo.userId;
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false;
            } else {
              this.treelength = true;
            }
            // this.companyId = this.treeData[0].fCompanyid;
            // this.showName = this.treeData[0].fShortname;
            if (this.checkData[0]) {
              this.showName = JSON.parse(
                sessionStorage.getItem("currencyList")
              ).fShortname;
              this.companyId = this.checkData[0];
              this.getList.fCompanyid = this.checkData[0];
            } else {
              this.showName = this.treeData[0].fShortname; //当前点击组织机构名称
              this.companyId = this.treeData[0].fCompanyid; //当前点击组织机构ID
              this.getList.fCompanyid = this.treeData[0].fCompanyid;
              this.checkData[0] = this.treeData[0].fCompanyid;

            }

            // 列表
            this.yj_searchForm(this.getList);
            // 列表
          } else {
            this.$message.error("组织机构", res.msg);
          }
        })
        .catch(() => {
          console.log("获取组织机构失败");
        });
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.showName = data.fShortname; //顶部显示机构名
      this.getList.fCompanyid = data.fCompanyid;

      this.yj_searchForm(this.getList);
    },
    // 获取列表数据
    yj_searchForm(id) {
      this.loading = true;
      id.fUserid = this.userInfo.userId;
      getMangEquipmentPageList(id)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.loading = false;
            that.tableData = res.data.mangEquipmentList.list;
            that.queryCriteriaData = res.data.mangEquipmentList;
            that.navigatepageNums =
              that.queryCriteriaData.navigatepageNums.length;
          } else {
            this.$message.error("列表数据", res.msg);
            this.loading = false;
          }
        })
        .catch(() => {
          console.log("列表数据");
          this.loading = false;
        });
    },
    // 通过设备类型过滤
    filterDepartment(type) {
      if (type == "==请选择==") {
        this.getList.keyType = "";
      } else {
        this.getList.keyType = type;
      }
      this.yj_searchForm(this.getList);
    },
    //查看下级
    see() {
      if (this.checked == true) {
        this.getList.sublevel = 1;
      } else {
        this.getList.sublevel = 0;
      }
      this.yj_searchForm(this.getList);
    },
    // 查看
    editText(id) {
      this.fPhotofilelist = [];
      if (id != "" && id != null) {
        this.dialogTableVisible = true;
        this.loadingDialog = false;
        getMangEquipmentByFid({ fId: id })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.loadingDialog = false;
              that.dialogTableVisible = true;
              that.formData = res.data.lrMangEquipment;
              this.fPhotofilelist = res.data.fSourcefileList;
              console.log(
                " res.data.fSourcefileList",
                res.data.fSourcefileList
              );
            } else {
              this.$message.error("查看", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("查看");
            this.loadingDialog = false;
          });
      } else {
        this.$message.error("请先选择需要查看的数据");
      }
    },

    // 关闭
    resetForm() {
      this.dialogTableVisible = false;
    },

    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      // var w = document.documentElement.clientWidth; //获取页面可见高度
      this.dialogHeight = h * 0.35 + "px";
      this.dialogHeights = h * 0.95 + "px";
    },

    // 点击查看
    yj_viewForm(row) {
      this.fId = row.fId;
      this.editText(this.fId);
    },
    // 点击当前
    rowChange(val) {
      this.row = val;
      this.fId = val.fId;
    },
    // 多选方法
    selectionChange() { },
    // 排序方法
    sortChange() { },
  },
};
</script>

<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}
</style>